<template>
	<view class="main">
		<header-vue :back="true" title="投诉"></header-vue>
		<view class="px-32rpx py-28rpx">
			<view class="white-box pb-0rpx">
				
					<view class="flex item">
						<image :src="IMAGE_URL + '/static/login/bg.png'"></image>
						<view class="flex column between start store-info">
							<view>
								<view class="flex start">
									<!-- <view class="tag font20">自营</view> -->
									<view class="font28 fontbold-500">巴旦木去核奶枣零食夹心</view>
								</view>
								<view class="sale-num font24">已选：日常保洁2小时</view>
							</view>
							<view class="flex between font20 num">
								<view class="flex price">
									<text class="font24">￥</text>
									<text class="font32">45</text>
									<text class="font24">/60分钟</text>
									<text class="font20" style="color: #999;margin-left: 12rpx;">一口价</text>
								</view>
							</view>
						</view>
					</view>
				
			</view>
			<view class="white-box pb-28rpx">
				<view class="flex start user">
					<image :src="IMAGE_URL + '/static/login/bg.png'" class="avatar"></image>
					<view>
						<view class="font28 fontbold-500">刘德华</view>
						<view class="flex info font24">
							<image :src="IMAGE_URL + '/static/mine/sex.png'" class="sex"></image>
							<view>52岁</view>
							<view class="line"></view>
							<view>河北保定</view>
						</view>
					</view>
				</view>
			</view>
			<view class="white-box pb-28rpx">
				
						<view class="card-header">
						    <view class="header-icon">
						        <!-- 需求信息图标 -->
						        <image class="header-icon-img" :src="IMAGE_URL + '/static/community/icon13.png'" mode="aspectFit"></image>
						    </view>
						    <text class="card-title">投诉内容</text>
						</view>
						<view class="demand-card">
						    <view class="demand-content">
						        <textarea 
						            class="demand-textarea" 
						            placeholder= '请描述您要投诉的内容...~'
						            v-model="formData.demandDesc"
						        ></textarea>
						    </view>
							<view class="image-upload">
								<view class="uploaded-images">
									<view class="image-item" v-for="(img, index) in formData.uploadedImages" :key="index">
										<image :src="img" class="uploaded-img" mode="aspectFill"></image>
										<view class="delete-btn" @click="removeImage(index)">×</view>
									</view>
								</view>
								<view class="upload-btn" @click="chooseImage" v-if="formData.uploadedImages.length < 9">
									<u-icon name="camera" color="#666" size="50rpx"></u-icon>
									<text class="upload-text">上传照片</text>
								</view>
							</view>
						</view>
			</view>
			<view class="flex between white-box pb-28rpx">
				<view class="text-333333 font28">手机号码</view>
				<input v-model="formData.phone" maxlength="11" @input="clearError('phone')" class="font28" placeholder="请输入手机号码" />
			</view>
		</view>
		<fixed-footer>
		    <view class="submit-btn" @click="handleSet">发布</view>
		</fixed-footer>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from '../../views/shop/components/numBox.vue'
	import fixedFooter from '@/components/fixed-footer/index.vue';
	import { phoneVerification } from '@/utils/utils'
	import {
		searchApi
	} from '../../api/modules/shop'
	import appConfig from '@/config/app.js'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				// 错误信息
				error: {
					phone: '',      // 手机号错误信息
				},
				valid:true,
				formData:{
					phone:'',
					demandDesc:'',
					uploadedImages:[]
				}
			}
		},
		components: {
			headerVue,
			numBoxVue,
			fixedFooter
		},
		mounted() {},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
			
			chooseImage() {
			    const remaining = 9 - this.uploadedImages.length;
			    if (remaining <= 0) return;
			    
			    uni.chooseImage({
			        count: remaining,
			        sizeType: ['compressed'],
			        sourceType: ['album', 'camera'],
			        success: (res) => {
			            const files = Array.isArray(res.tempFiles) ? res.tempFiles : []
			            const filePathsFromFiles = files
			                .map(f => (f && (f.path || f.tempFilePath || f.filePath)) || '')
			                .filter(p => !!p)
			            const filePaths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : []
			            const merged = filePathsFromFiles.length ? filePathsFromFiles : filePaths
			            this.uploadedImages = this.uploadedImages.concat(merged)
			        }
			    });
			},
			removeImage(index) {
			    this.uploadedImages.splice(index, 1);
			},
			
			/*** 清除所有错误信息 */
			clearAllError() {
				this.error = { phone: '', password: '', code: '' };
			},
			
			/*** 清除指定字段的错误信息* @param {string} field 字段名 */
			clearError(field) {
				this.error[field] = '';
			},
			/**
			 * 
			 * 提交表单验证，验证通过后调用登录接口
			 */
			handleSet() {
				let valid = true; // 表单验证标志
				 console.log(this.formData.demandDesc)
				if (this.formData.demandDesc == ''|| undefined) {
					uni.showToast({
						title:'投诉内容不能为空', 
						icon: 'none' 
					});
					valid = false;
				} else{
					//  手机号校验
					let phoneTip = phoneVerification(this.formData.phone);
					if (phoneTip) {
						this.error.phone = phoneTip;
						uni.showToast({
							title:this.error.phone, 
							icon: 'none' 
						});
						valid = false;
						
					} else {
						this.error.phone = ''; // 清除手机号错误信息
					}
				
				}
				if (!valid) return;
			
				this.setEvent();
			},
			setEvent(){
				console.log(this.formData)
			}
		
		}
	}
</script>
<style lang="scss" scoped>
	@import url("/common/public.scss");

	.main {
		background: #F6F6F6;
		min-height: 100vh;
		padding-bottom: 88rpx;
		box-sizing: border-box;
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;

		.status {
			margin: 28rpx 0;
		}
	}

	.color-gold {
		color: #DF9824 !important;
	}

	.icon-clock,.icon-star {
		font-size: 24rpx;
		color: #DF9824;
		margin-right: 4rpx;
	}
	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;
		padding: 28rpx 28rpx 16rpx 28rpx;
		box-sizing: border-box;
		margin-bottom: 28rpx;
		
		.title-icon {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.store-title {
			padding-bottom: 28rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.price {
			color: $uni-text-color-red;
			align-items: baseline;
		}

		.item {
			padding-bottom: 28rpx;
		}

		.store-info {
			width: 100%;
			height: 200rpx;
			align-items: flex-start;

			.tag {
				padding: 0 8rpx;
				height: 28rpx;
				box-sizing: border-box;
				background: #DF9824;
				border-radius: 4rpx;
				margin-right: 8rpx;
				color: $uni-text-color-inverse;
			}

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 12rpx;
			}

			.num {
				color: $uni-text-color-grey1;
				width: 100%;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}

		.color-666 {
			color: $uni-text-color-grey1;
		}
		
		.user {
			
			
			.avatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.sex {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
			
			.info {
				color: #999;
			}
			
			.line {
				height: 24rpx;
				width: 2rpx;
				background: #DDDDDD;
				margin: 0 12rpx;
			}
		}
		input {
			text-align: right;
		
			::v-deep .input-placeholder {
				color: #AAAAAA;
			}
		}

	}
	.address-style{
		width: 10rpx;
		height: 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid #DF9824;
		margin-right: 18rpx;
	}
	.divider-style{
		width: 0rpx;
		height: 28rpx;
		border: 1px solid #FFE7C0;
		margin-left: 4rpx;
	}
	.icon-clock {
		font-size: 24rpx;
		color: #DF9824;
		margin-right: 4rpx;
	}
	.prd-img{
		width: 140rpx;
		height: 160rpx;
		image{
			width: 140rpx;
			height: 160rpx;
		}
	}
	.submit-btn {
	    width: 100%;
	    height: 76rpx;
	    background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
	    border-radius: 60rpx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 32rpx;
	    color: #FFFFFF;
	    font-weight: 600;
	}
	.demand-textarea {
	    width: 100%;
	    height: 200rpx;
	    font-size: 24rpx;
	    color: #333333;
	    border-radius: 8rpx;
	    padding: 20rpx 0;
	    box-sizing: border-box;
	    margin-bottom: 24rpx;
	}
	
	.image-upload {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 16rpx;
	}
	
	.uploaded-images {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 16rpx;
	}
	
	.image-item {
	    position: relative;
	    width: 148rpx;
	    height: 160rpx;
	    border-radius: 8rpx;
	    overflow: hidden;
		border: 1px solid #999999;
		image{
			width: 148rpx;
			height: 160rpx;
			border-radius: 8rpx;
		}
	}
	
	.uploaded-img {
	    width: 100%;
	    height: 100%;
	}
	
	.delete-btn {
	    position: absolute;
	    top: 4rpx;
	    right: 4rpx;
	    width: 32rpx;
	    height: 32rpx;
	    background: rgba(0, 0, 0, 0.3);
	    color: #FFFFFF;
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 24rpx;
	}
	
	.upload-btn {
	    width: 148rpx;
	    height: 160rpx;
	    background: #F8F8F8;
	    border-radius: 8rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    color: #666;
		border: 1px solid #999999;
	}
	
	.upload-text {
	    font-size: 24rpx;
	    margin-top: 8rpx;
	}
	.demand-card{
		margin-top: 40rpx;
		background: #FAFAFA;
		border-radius: 12rpx;
		.demand-content{
			padding-left: 20rpx;
		}
	}
	.card-header {
	    display: flex;
	    align-items: center;
	    margin-bottom: 24rpx;
	}
.header-icon {
    width: 32rpx;
    height: 24rpx;
    margin-right: 16rpx;
	image{
		width: 32rpx;
		height: 24rpx;
		vertical-align: top;
	}
}

.card-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
}

</style>